<template>
  <div>
    <div class="add appBox">
      <el-form ref="ruleFormRef"
               :model="ruleForm"
               status-icon
               :rules="rules"
               :label-width="$px2rem('100px')"
               label-position="left"
               class="demo-ruleForm">
        <div class="top flex_sb">
          <div class="flex left">
            <div class="cup flex"
                 @click="back">
              <el-icon size="18">
                <Back />
              </el-icon>
              <div class="ruturn">返回</div>
            </div>
            <div class="title">{{ boxTitle }}</div>
          </div>
          <div>
            <el-button v-preventReClick
                       type="primary"
                       @click="submit(ruleFormRef)">
              保 存
            </el-button>
          </div>
        </div>
        <div class="flex content">

          <div class="right">
            <div class="formBox">
              <div class="top">
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="角色名称"
                                  prop="name">
                      <el-input v-model="ruleForm.name"
                                @input="ruleForm.name = $input.inputLimit('D10006', ruleForm.name)"
                                placeholder="角色名称"
                                clearable />
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="状态"
                                  prop="status">
                      <el-select v-model="ruleForm.status"
                                 class="m-2"
                                 placeholder="请选择状态">
                        <el-option label="正常"
                                   :value="0" />
                        <el-option label="禁用"
                                   :value="1" />
                      </el-select> </el-form-item></el-col>

                  <el-col :span="24">
                    <el-form-item label="平台"
                                  prop="type">
                      <el-select v-model="ruleForm.type"
                                 class="m-2"
                                 placeholder="请选择平台">
                        <el-option label="平台"
                                   :value="0" />
                        <el-option label="企业"
                                   :value="1" />
                      </el-select> </el-form-item></el-col>
                  <el-col :span="24"
                          v-if="ruleForm.type == 1">
                    <el-form-item label="&nbsp; 企业"
                                  prop="cid">
                      <el-select v-model="ruleForm.cid"
                                 class="m-2"
                                 placeholder="请选择企业">
                        <el-option :label="i.name"
                                   :value="i.id"
                                   v-for="i in cidList"
                                   :key="i" />
                      </el-select> </el-form-item></el-col>

                  <el-col :span="24">
                    <el-form-item label="&nbsp;&nbsp;备注"
                                  prop="">
                      <el-input v-model="ruleForm.remark"
                                @input="ruleForm.remark = $input.inputLimit('D10012', ruleForm.remark)"
                                placeholder="请输入备注"
                                maxlength="150"
                                show-word-limit
                                type="textarea"></el-input> </el-form-item></el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import chooseAddress from "@/components/map.vue";
import {
  defineComponent,
  onMounted,
  reactive,
  getCurrentInstance,
  ref,
  toRefs,
} from "vue";
import area from "@/utils/area.js";
import { useRouter, useRoute } from "vue-router";
import { ElLoading, ElMessageBox, ElMessage } from "element-plus";
export default defineComponent({
  components: {
    chooseAddress,
  },
  setup () {
    const app = getCurrentInstance()?.proxy;
    const router = useRouter();
    const route = useRoute();
    const initState = () => {
      return {
        cidList: [],
        boxTitle: "创建角色",
        props: {
          checkStrictly: true,
          label: "value",
          value: "value",
        },
        propsCity: [],
        ruleForm: {
          cid: "",
          companyName: "",
          status: "",
          type: "",
          name: "",
          remark: "",
        },
        rules: {
          companyName: [
            { required: true, message: "请输入企业名称", trigger: "blur" },
          ],
          name: [
            { required: true, message: "请输入角色名称", trigger: "blur" },
          ],
          remark: [
            { required: true, message: "请输入备注", trigger: "change" },
          ],

          type: [{ required: true, message: "请选择平台", trigger: "blur" }],

          status: [{ required: true, message: "请选择状态", trigger: "blur" }],
        },
      };
    };
    const state = reactive(initState());
    onMounted(() => {
      state.propsCity = area;
      methods.getCidList();
      if (route.query.id) {
        methods.getData();
        state.boxTitle = "编辑角色";
      }
    });
    const methods = {
      getData () {
        app.$get('/sys/role/getInfo?id=' + route.query.id).then(res => {
          if (res.data) {
            state.ruleForm = res.data
          }
          console.log(res);
        })

      },

      getCidList () {
        app.$http
          .post("/company/pageListAuthentication", {
            pageNum: 1,
            pageSize: "999",
            approveStatus: 1,
            descs: ["id"],
          })
          .then((res) => {
            state.cidList = res.data.list;
          });
      },
      back () {
        router.go(-1);
      },
      submit () {
        app.$refs.ruleFormRef.validate((valid) => {
          if (valid) {
            const loading = ElLoading.service({
              text: "加载中..",
            });
            let url = "/sys/role/modify/role";
            let data = JSON.parse(JSON.stringify(state.ruleForm));
            app.$http.post(url, data).then((res) => {
              if (res.code == 200) {
                ElMessage({
                  message: "成功保存",
                  type: "success",
                });
                router.go(-1);
              }
              loading.close();
            }).catch(() => {
              loading.close();
            });
          }
        });
      },
      // 角色glogo
      UploadLogo (data) {
        state.ruleForm.logoImg = data;
      },
      // 营业执照
      UploadLicense (data) {
        state.ruleForm.license = data;
      },
      // 营业执照
      UploadPermit (data) {
        state.ruleForm.permit = data;
      },
    };
    return {
      ...toRefs(state),
      ...methods,
    };
  },
});
</script>

<style lang="scss" scoped>
.add {
  .demo-ruleForm {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .top {
    .ruturn {
      color: rgba(121, 121, 121, 1);
      font-size: 16px;
      position: relative;
      margin-left: 10px;
      margin-top: -2px;
    }
    .ruturn::before {
      content: '';
      position: absolute;
      left: 50px;
      top: 4px;
      width: 1px;
      height: 16px;
      background: rgba(121, 121, 121, 0.8);
    }
    .left {
      align-items: center;
    }
    .title {
      color: rgb(83, 83, 83);
      font-size: 16px;
      margin-left: 40px;
      font-weight: bold;
    }
  }
  .content {
    width: 100%;
    margin-top: 20px;
    height: 100%;
    flex: 1;
    .left {
      width: 360px;
      height: 100%;
      display: flex;
      flex-direction: column;
      color: rgb(174, 174, 178);
      font-size: 16px;
      .jbzl {
        background-color: rgba(242, 242, 247, 0.33);
        border-radius: 5px;
        height: 426px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .rzxx {
        margin-top: 16px;
        background-color: rgba(242, 242, 247, 0.33);
        border-radius: 5px;
        flex: 1;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .right {
      flex: 1;
      margin-left: 18px;
      .logosm {
        ::v-deep(.el-form-item__label::after) {
          content: '130*130 像素';
          color: #969696;
          position: absolute;
          font-size: 12px;
          top: 24px;
          left: 20px;
        }
      }
      .formBox {
        display: flex;
        height: 100%;
        flex-direction: column;
        .top {
          background-color: rgba(242, 242, 247, 0.33);
          border-radius: 5px;
          height: 100%;
          width: 100%;
          padding: 24px;
        }
        .bottom {
          padding: 24px;
          margin-top: 16px;
          background-color: rgba(242, 242, 247, 0.33);
          border-radius: 5px;
          width: 100%;
          flex: 1;
        }
        .workimgtitle {
          color: #969696;
          font-size: 14px;
        }
        ::v-deep(.el-row) {
          margin-bottom: 10px;
        }
        .addImg {
          width: 100px;
          height: 100px;
          margin-left: 100px;
          border-radius: 2px;
          text-align: center;
          line-height: 100px;
          font-size: 26px;
          cursor: pointer;
          background-color: rgba(255, 255, 255, 1);
        }
      }
    }
    ::v-deep(.el-select) {
      width: 100%;
    }
  }
}
</style>
